<template>
  <div>
    <el-row class="_layout-border-bottom">
      <el-col class="i-layout-page-header" :span="20">
        <div class="ivu-page-header-title">页面装修</div>
      </el-col>
      <el-col :span="4">
        <div class="i-layout-page-btn">
          <el-button type="primary" @click="submit" v-hasPermi="['platform:onsitediy:save']">保存</el-button>
          <el-button @click="reset" v-hasPermi="['platform:onsitediy:save']">重置</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="_layout-flex _white-bg">
      <el-col :span="3" class="_layout-border-right">
        <el-menu :default-active="cardShow">
          <el-menu-item
            :index="item.id"
            :name="item.id"
            v-for="(item, index) in menuList"
            :key="item.id"
            @click.native="bindMenuItem(item.id)"
          >
            <div class="menu-text">{{ item.name }}</div>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="21" class="_white-bg ivu-card-body">
        <serviceIndex ref="serviceIndex" :cardShow="cardShow"></serviceIndex>
        <users ref="users" :cardShow="cardShow"></users>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import Setting from "@/setting";
// import {
//   diyList,
//   diyDel,
//   recovery,
//   getRoutineCode,
//   getDiyCreate,
//   setDefault,
// } from "@/api/diy";
import users from './users';
import serviceIndex from './service_index';
export default {
  name: 'devise_list',
  components: {
    users,
    serviceIndex,
  },
  data() {
    return {
      cardShow: '1',
      menuList: [
        {
          name: '上门首页',
          id: '1',
        },
        {
          name: '上门个人中心',
          id: '2',
        },
      ],

      list: [],
    };
  },

  mounted() {},

  methods: {
    submit() {
      if (this.cardShow == '1') {
        this.$refs.serviceIndex.onSubmit();
      } else {
        this.$refs.users.onSubmit();
      }
    },
    reset() {
      if (this.cardShow == '1') {
        this.$refs.serviceIndex.onSubmit();
      } else {
        this.$refs.users.getInfo();
      }
    },
    bindMenuItem(index) {
      this.cardShow = index;
    },
  },
};
</script>

<style scoped>
.i-layout-page-header {
  height: 66px;
  padding: 7px 32px 0 32px;
  display: flex;
  align-items: center;
}

.ivu-page-header-title {
  font-size: 20px;
  font-weight: 500;
}

.i-layout-page-btn {
  height: 66px;
  padding: 7px 32px 0 32px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.i-layout-page-btn > button {
  flex: 1;
}

._white-bg {
  background-color: #fff;
}

.ivu-card-body {
  padding: 16px;
}

._layout-border-bottom {
  border-bottom: 1px solid #e8eaec;
}

._layout-border-right {
  border-right: 1px solid #dcdee2;
}

._layout-flex {
  display: flex;
  padding-bottom: 50px;
}

.menu-text {
  width: 100%;
  text-align: center;
}
</style>
